<template>
  <div>
    <div id="container2" />
  </div>
</template>

<script>
import { Line } from "@antv/g2plot";
export default {
  props: ["device"],
  data() {
    return {
      value: "",
      activeName: "1",
      data: [],
      date: {},
      dualAxes2: "",
    };
  },
  mounted() {
    this.$bus.$on("date", (item) => {
      this.date = item;
      this.getData();
    });
  },
  methods: {
    // 请求温湿度历史数据
    getData() {
      this.$http
        .get("/v1/gludevicePropHistoryLog/list", {
          params: {
            deviceName: this.device.deviceName,
            startDate: this.date.startDate,
            endDate: this.date.endDate,
          },
        })
        .then((res) => {
          this.data = res.data; // 定义图表数据

          if (this.dualAxes2) {
            this.dualAxes2.update({
              // 标注，阈值的标注
              annotations: [
                {
                  type: "text",
                  position: ["min", this.device.maxgluThreshold],
                  content: this.device.maxgluThreshold + "mmol/L",
                  offsetY: -4,
                  style: {
                    textBaseline: "bottom",
                  },
                },
                {
                  type: "line",
                  start: ["min", this.device.maxgluThreshold],
                  end: ["max", this.device.maxgluThreshold],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
                {
                  type: "text",
                  position: ["min", this.device.mingluThreshold],
                  content: this.device.mingluThreshold + "mmol/L",
                  offsetY: -4,
                  style: {
                    textBaseline: "bottom",
                  },
                },
                {
                  type: "line",
                  start: ["min", this.device.mingluThreshold],
                  end: ["max", this.device.mingluThreshold],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
              ],
            });
            this.dualAxes2.changeData(this.data);
          } else {
            this.dualAxes2 = new Line("container2", {
              data: this.data,
              xField: "gmtCreate",
              yField: "currentGlu",

              meta: {
                currentGlu: {
                  alias: "血糖",
                },
              },
              yAxis: {
                min: 0,
                max: 8,
              },

              // 标注，温度阈值的标注
              annotations: [
                {
                  type: "text",
                  position: ["min", this.device.maxgluThreshold],
                  content: this.device.maxgluThreshold + "mmol/L",
                  offsetY: -4,
                  style: {
                    textBaseline: "bottom",
                  },
                },
                {
                  type: "line",
                  start: ["min", this.device.maxgluThreshold],
                  end: ["max", this.device.maxgluThreshold],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
                {
                  type: "text",
                  position: ["min", this.device.mingluThreshold],
                  content: this.device.mingluThreshold + "mmol/L",
                  offsetY: -4,
                  style: {
                    textBaseline: "bottom",
                  },
                },
                {
                  type: "line",
                  start: ["min", this.device.mingluThreshold],
                  end: ["max", this.device.mingluThreshold],
                  style: {
                    stroke: "#F4664A",
                    lineDash: [2, 2],
                  },
                },
              ],
            });
            this.dualAxes2.render();
          }
        });
    },
  },
  watch: {
    device(newValue, oldValue) {
      this.getData();
    },
  },
};
</script>

<style scoped>
.detail-data {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: flex-start;
}
.label {
  line-height: 36px;
  margin-right: 20px;
}
.search-btn {
  margin: 0 20px;
}
</style>